<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="姜启航">
    <title></title>
    <style>
		.container{
			width: 600px;
			margin: 0 auto;
			border: 1px solid #000;
			text-align: center;
		}
		.container ul{
			margin: 0;
			padding: 0;
			list-style: none;
			overflow: hidden;
			padding: 5px;
		}
		.container li{
			float: left;
			width: 100px;
			height: 100px;
			/* margin: 10px; */
			position: relative;
            margin-left: 10px;
		}
		.container li a{
			display: block;
			text-decoration: none;
			width: 70px;
			height: 70px;
			padding: 10px;
			border: 1px solid #000;
			background-color: #bbb;
			color: #666;
		}
		.container li a strong{
			display: block;
		}
		.container li img{
			display: none;
			position: absolute;
			top: -14px;
			left: -14px;
			border: 2px solid #ccc;
		}
		.zindex{
			z-index: 10;
		}		
	</style>
</head>
<body>
<div class="container">
<h2>车标展示</h2>
	<ul>
		<li><a href="#"><strong>BMW</strong>宝马汽车</a><img src="img/1.jpg" alt=""></li>
		<li><a href="#"><strong>ALFA ROMEO</strong>宝马汽车</a><img src="img/2.jpg" alt=""></li>
		<li><a href="#"><strong>SKODA</strong>宝马汽车</a><img src="img/3.jpg" alt=""></li>
		<li><a href="#"><strong>W</strong>宝马汽车</a><img src="img/4.jpg" alt=""></li>
		<li><a href="#"><strong>SAAB</strong>宝马汽车</a><img src="img/5.jpg" alt=""></li>
		<li><a href="#"><strong>LAMBORGHINI</strong>宝马汽车</a><img src="img/6.jpg" alt=""></li>
		<li><a href="#"><strong>PORSCHE</strong>宝马汽车</a><img src="img/7.jpg" alt=""></li>
		<li><a href="#"><strong>MA</strong>宝马汽车</a><img src="img/8.jpg" alt=""></li>
		<li><a href="#"><strong>BENCHI</strong>宝马汽车</a><img src="img/9.jpg" alt=""></li>
		<li><a href="#"><strong>BK</strong>宝马汽车</a><img src="img/10.jpg" alt=""></li>
	</ul>
</div>
</body>
</html>


<script>
	
window.onload = function () {
	var lis = document.querySelectorAll('li');
	var imgs = document.querySelectorAll('img');
	
	for (var i = 0; i < lis.length; i++) {
		lis[i].index = i;
		lis[i].onmouseover = function () {
			this.className = 'zindex';
			imgs[this.index].style.display = 'block';
		}
		
		lis[i].onmouseout = function () {
			this.className = '';
			imgs[this.index].style.display = 'none';
		}
	}		
}
</script>
</body>
</html>